<template>
  <h1>日期时间选择器组件</h1>
  <el-date-picker v-model="sj" type="datetime" placeholder="请选择下单时间"
  @change="console.log(sj)"
  format="YYYY-MM-DD HH:mm:ss"
  value-format="YYYY-MM-DD HH:mm:ss"></el-date-picker>

  <el-date-picker v-model="rq" type="date" placeholder="请选择打卡时间"
                  @change="console.log(rq)"
                  format="YYYY-MM-DD "
                  value-format="YYYY-MM-DD "></el-date-picker>
  <br>
  <el-date-picker v-model="times" type="datetimerange" start-placeholder="选择开始时间" end-placeholder="请选择结束时间"
                  range-separator="至"
                  @change="f"
                  format="YYYY-MM-DD "
                  value-format="YYYY-MM-DD "></el-date-picker>

</template>

<script setup>
import {ref} from "vue";
//定义变量用户保存用户选择的时间
const rq =ref('');
const sj=ref('')
//定义数组用来保存起止时间
const times=ref([]);
const f=()=>{
  console.log(times.value);
  console.log(times.value[0]);
  console.log(times.value[1]);
}
</script>

<style scoped>

</style>